<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="属性" name="props"> <Props /> </el-tab-pane>
    <el-tab-pane
      label="样式"
      v-if="editorStore.currentComponentId"
      name="styles"
    >
      <Styles />
    </el-tab-pane>
    <el-tab-pane
      label="事件"
      v-if="editorStore.currentComponentId"
      name="events"
    >
      <Events />
    </el-tab-pane>
    <el-tab-pane label="代码" v-if="editorStore.currentComponentId" name="code">
      <Code />
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import Props from "./components/props/index.vue";
import Styles from "./components/styles/index.vue";
import Events from "./components/events/index.vue";
import Code from "./components/code/index.vue";

import useEditorStore from "@/store/modules/editor";
const editorStore = useEditorStore();

defineOptions({
  name: "Right",
});

const activeName = ref("props");

watch(
  () => editorStore.currentComponentId,
  () => {
    activeName.value = "props";
  }
);
</script>

<style scoped lang="scss">
.el-tabs {
  height: calc(100vh - 50px);
  background-color: #fff;
}

:deep(.el-tabs__nav) {
  width: 100%;
  justify-content: space-around;
}
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
